@if (question && (question.text || question.text === '')) {
    <ion-list>
        <ion-item class="ion-text-wrap addon-qtype-shortanswer-text">
            <ion-label>
                <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
                    [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
            </ion-label>
        </ion-item>
        @if (question.input && !question.input.isInline) {
            <ion-item class="ion-text-wrap addon-qtype-shortanswer-input core-{{question.input.correctIconColor}}-item">
                <ion-input labelPlacement="stacked" type="text" [attr.name]="question.input.name" [value]="question.input.value"
                    autocorrect="off" [disabled]="question.input.readOnly" [label]="'addon.mod_quiz.answercolon' | translate"
                    [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate"/>

                @if (question.input.correctIcon) {
                    <ion-icon class="core-correct-icon" slot="end" [name]="question.input.correctIcon"
                        [color]="[question.input.correctIconColor]" [ariaLabel]="question.input.correctIconLabel" />
                }
            </ion-item>
        }
    </ion-list>

}
